<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="controlsystem.MilestoneController" %>
<%@ page import="controlsystem.Milestone" %>
<%@ page import="managesystem.Student" %>
<%@ page import="managesystem.StudentManager" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="controlsystem.showCurrentMilestoneServlet" %>


<%
    Student currStud = (Student) session.getAttribute("currStud");
    MilestoneController.deleteAllPositions(currStud); 
	List<Milestone> milestones2 = MilestoneController.checkProgress(currStud); 
	
%>
<html>
 <head>
    <link type="/styles/style.css" rel="stylesheet"  />
     <title>Milestones</title>
  </head>

  <body>
<p>


</p>


 
<div class=tekstBlok >
<h3>Milestones</h3>
    <div id=info>Click on the milestone chart for info</div>
  <head>
  
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <form id=currentMilestoneForm hidden=true>
					 <fieldset>
					 
	                 <legend><u><b><p><div id=titel></div></p></b></u></legend>
	                 <div id=course></div>
	                 <div id=endDate></div>
	                 <div id=creationDate></div>
	                 <div id=typeAndValue></div>
	                 <div id=progress></div>
	                 <div id=description></div>
				
                     </fieldset>
       </form>            
   <u><b><p>Ongoing Milestones:</p></b></u> 
    <script type="text/javascript">
    
      google.load("visualization", "1", {packages:["barchart"]});
      google.setOnLoadCallback(drawChart);


      //milestones in de google bar chart laden.  
      function drawChart() {
        
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'course');
        // Afgelegd deel van de milestone
        data.addColumn('number', 'done');
        //nog af te leggen deel van de milestone
        data.addColumn('number', 'to do');
        data.addRows(<%=milestones2.size()%>);
        //aantal milestones
        
        
       
       
      <% 
        
     
     
       
	  int p = 0;
	  int w=0;
	  int n=0;
	  
	while(n<milestones2.size()){	  
	
		Milestone milestone=milestones2.get(p);
		
		milestone.setPosition(w);
        StudentManager.add(currStud);
      
        %>

  
        
        <%int a=(int)milestone.getProgress(); ;%>
        <%int u=milestone.getValue(); %>
        <%double q=(double)a/(double)u;%>
        var c= <%=100*q%>;
        var b=30;
        var i=0;
        var a=<%=w%>

        <%if(a>=u){%>
        var c=100;
        <%}%>
        i=0;     
        data.setValue(a, i,"<%=w+1%>"+") "+"<%=milestone.getCourse().getName()%>"); 
        i++;
        data.setValue(a,i,c);
        i++;
        data.setValue(a, i,100-c);
       
      
        <%
  	  p++;
      w++; 
      n++;
  	  }
	  
	  
  	  %>
    

    
        
        chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {'isStacked': true,'backgroundColor': '#b5d4e0','chartArea.left' : 50,width: 650, height: <%=milestones2.size()*30%> ,'colors':['green','red'],'hAxis.baselineColor':'green'});
        google.visualization.events.addListener(chart, 'select', selectHandler);
        
        
       


      
          function selectHandler() {
        	  
              var selection = chart.getSelection(); 
              item=selection[0].row;
       
              $.get('showCurrentMilestone',{'id':item}, function(data) {       
                   
                            document.getElementById('titel').innerHTML="Details milestone "+data[0]+":";
                            document.getElementById('course').innerHTML="Course: "+data[0];
                            document.getElementById('endDate').innerHTML=data[5];
                            document.getElementById('creationDate').innerHTML=data[4];
                            document.getElementById('typeAndValue').innerHTML=data[1];
                            document.getElementById('progress').innerHTML=data[2];
                            document.getElementById('description').innerHTML="Description: "+data[3];
                            document.getElementById('currentMilestoneForm').hidden=false;
                            document.getElementById('info').innerHTML="";
                            
            });   
              
           }
      }
          
    </script>
        
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
  
  


</div>


  </body>

</html>









